<%--
  Created by IntelliJ IDEA.
  User: Titi
  Date: 2020/10/4
  Time: 19:27
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/index01.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/loading.css" rel="stylesheet" type="text/css">
    <link href="<%=request.getContextPath()%>/css/index.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/bank.css" rel="stylesheet">
</head>
<body background="#eee">


<%--导航条--%>
<jsp:include page="../common/nav.jsp"></jsp:include>
<div class="section">
    <div class="container">
        <div class="row justify-content-center">
            <input class="checkbox-alizarin" type="checkbox" id="color-1"  checked="checked" onclick="flexs1()" />
            <label for="color-1">JAVA</label>
            <input class="checkbox-wisteria" type="checkbox" id="color-2"  checked="checked" onclick="flexs2()"/>
            <label for="color-2">PYTHON</label>
            <input class="checkbox-emerland" type="checkbox" id="color-3"  checked="checked" onclick="flexs3()"/>
            <label for="color-3">MYSQL</label>
            <input class="checkbox-belizehole" type="checkbox" id="color-4"  checked="checked" onclick="flexs4()"/>
            <label for="color-4">C/C++</label>
            <input class="checkbox-sunflower" type="checkbox" id="color-5"  checked="checked" onclick="flexs5()"/>
            <label for="color-5">WEB</label>
<%--            <div class="section p-0 pt-2"></div>--%>

<%--            <button type="button" onclick="flexs()">123</button>--%>


            <c:forEach begin="0" end="${questionbank.size}" items="${questionbank.list}" var="i">
                <c:if test="${i.parperLanguage=='java'}">
                    <div class="col box alizarin" id="java+${i}" style="padding-top: 20px;padding-left:20px;color: white;display: flex">
                        <div>
                            <h1>${i.parperName}</h1>
                            <div style="padding-top: 10px;font-size: 18px">难度:${i.parperDiff}</div>
                        </div>
                        <div style="padding-left: 70%">
                            <h1>总分:${i.parperScore}</h1>
                            <button class="btn-info" style="padding: 10px;margin-top: 30px;border: none;border-radius: 5px" onclick="starts(${i.parperId})">立即考试</button>
                        </div>
                    </div>

                </c:if>
                <c:if test="${i.parperLanguage=='python'}">
                    <div class="col box wisteria" id="python+${i}" style="padding-top: 20px;padding-left:20px;color: white;display: flex">
                        <div>
                            <h1>${i.parperName}</h1>
                            <div style="padding-top: 10px;font-size: 18px">难度:${i.parperDiff}</div>
                        </div>
                        <div style="padding-left: 66%">
                            <h1>总分:${i.parperScore}</h1>
                            <button class="btn-info" style="padding: 10px;margin-top: 30px;border: none;border-radius: 5px" onclick="starts(${i.parperId})">立即考试</button>
                        </div>
                    </div>
                </c:if>
                <c:if test="${i.parperLanguage=='mysql'}" >
                    <div class="col box emerland" id="mysql+${i}" style="padding-top: 20px;padding-left:20px;color: white;display: flex">
                        <div>
                            <h1>${i.parperName}</h1>
                            <div style="padding-top: 10px;font-size: 18px">难度:${i.parperDiff}</div>
                        </div>
                        <div style="padding-left: 67%">
                            <h1>总分:${i.parperScore}</h1>
                            <button class="btn-info" style="padding: 10px;margin-top: 30px;border: none;border-radius: 5px" onclick="starts(${i.parperId})">立即考试</button>
                        </div>
                    </div>
                </c:if>
                <c:if test="${i.parperLanguage=='c/c++'}">
                    <div class="col box belizehole" id="c+${i}" style="padding-top: 20px;padding-left:20px;color: white;display: flex">
                        <div>
                            <h1>${i.parperName}</h1>
                            <div style="padding-top: 10px;font-size: 18px">难度:${i.parperDiff}</div>
                        </div>
                        <div style="padding-left: 68%">
                            <h1>总分:${i.parperScore}</h1>
                            <button class="btn-info" style="padding: 10px;margin-top: 30px;border: none;border-radius: 5px" onclick="starts(${i.parperId})" >立即考试</button>
                        </div>
                    </div>
                </c:if>
                <c:if test="${i.parperLanguage=='web'}">
                    <div class="col box sunflower" id="web+${i}" style="padding-top: 20px;padding-left:20px;color: white;display: flex">
                        <div>
                            <h1>${i.parperName}</h1>
                            <div style="padding-top: 10px;font-size: 18px">难度:${i.parperDiff}</div>
                        </div>
                        <div style="padding-left: 68%">
                            <h1>总分:${i.parperScore}</h1>
                            <button class="btn-info" style="padding: 10px;margin-top: 30px;border: none;border-radius: 5px" onclick="starts(${i.parperId})" >立即考试</button>
                        </div>
                    </div>
                </c:if>
            </c:forEach>
            <ul>
                <li>
                    <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="/yuezhi/Ware/bank/${questionbank.prePage}">&laquo;</a></li>
                    <c:forEach begin="1" end="${questionbank.pages}" var="i">
                        <c:if test="${questionbank.pageNum==i}"><li class="active"><a href="#">${i}</a></li></c:if>
                        <c:if test="${questionbank.pageNum!=i}"><li ><a href="#">${i}</a></li></c:if>

                    </c:forEach>
                    <li><a href="/yuezhi/Ware/bank/${questionbank.nextPage}">&raquo;</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>




<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js" ></script>
<script>
    function starts(data) {
        window.location="/yuezhi/parper/start/"+data
    }
    var x1 = 1
    var x2 = 1
    var x3 = 1
    var x4 = 1
    var x5 = 1
    function flexs1() {
        if (x1 == 1) {
            x1 = 0;
            $("[id^=java]").css("display", "none")
        } else {
            x1 = 1;
            $("[id^=java]").css("display", "flex")
        }
    }
    function flexs2() {
        if (x2 == 1) {
            x2 = 0;
            $("[id^=python]").css("display", "none")
        } else {
            x2 = 1;
            $("[id^=python]").css("display", "flex")
        }
    }
    function flexs3() {
        if (x3 == 1) {
            x3 = 0;
            $("[id^=mysql]").css("display", "none")
        } else {
            x3 = 1;
            $("[id^=mysql]").css("display", "flex")
        }
    }
    function flexs4() {
        if (x4 == 1) {
            x4 = 0;
            $("[id^=c]").css("display", "none")
        } else {
            x4 = 1;
            $("[id^=c]").css("display", "flex")
        }
    }
    function flexs5() {
        if (x5 == 1) {
            x5 = 0;
            $("[id^=web]").css("display", "none")
        } else {
            x5 = 1;
            $("[id^=web]").css("display", "flex")
        }
    }
</script>


</body>
</html>
